<template>
  <div class="list_item flex">
    <div class="img_div">
      <img class="item_img" v-if="!i.isErr&&i.thumb_y" @error="i.isErr=true;$forceUpdate()" :src="i.thumb_y" alt="加载错误" />
      <img class="item_img" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/bgbgbg.png" />
    </div>
    <div class="info_div">
      <div class="flex_ac flex_sb">
        <div class="info_name">{{i.name}}</div>
        <van-icon class="mla" name="arrow" size="14" color="#FA871E"/>
      </div>
      <!-- <div class="info_l flex mt6">
        <div class="info_score">4.8分</div>
        <div class="info_sell">月售1366</div>
      </div> -->
      <!-- <div class="info_desc text_line mt6">政府补贴20%，价格叠加优惠</div> -->
      <!-- <div class="flex mt10">
        <div class="hb_item">红包999减50</div>
        <div class="hb_item">99减50</div>
      </div> -->
      <div class="p_list mt10">
        <div class="p_item" v-for="item,p in i.goods_info" :key="p">
          <img :src="item.imgs" alt="">
          <div class="p_name">{{ item.name }}</div>
          <div class="p_price">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    i: {
      default:{}
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    toUrl(url) {
      location.href = url
    }
  }
}
</script>
<style lang="scss" scoped>
.list_item{
  margin: 20px 0;
  .img_div{
    min-width: 67px;
    max-width: 67px;
    height: 67px;
    background: #FA871E;
    box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
    border-radius: 3px;
    margin: 0 10px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .info_div{
    width: calc(100% - 90px);
    padding-bottom: 20px;
    border-bottom: 1px solid #F0F0F0;
    overflow: hidden;
    .info_name{
      font-weight: bold;
      font-size: 15px;
      color: #000000;
    }
    .info_l{
      line-height: 20px;
    }
    .info_score{
      font-weight: 600;
      font-size: 14px;
      color: #FA871E;
      margin-right: 10px;
    }
    .info_sell{
      font-size: 13px;
      color: #999999;
    }
    .info_desc{
      font-size: 11px;
      color: #FA871E;
      height: 20px;
      line-height: 20px;
      background: #FCEFE4;
      border-radius: 3px;
      max-width: 100%;
      width: fit-content;
      padding: 0 10px;
    }
    .hb_item{
      height: 18px;
      background: #FFFFFF;
      border-radius: 3px;
      border: 1px solid #FA871E;
      font-size: 11px;
      color: #FA6C1E;
      line-height: 18px;
      padding: 0 5px;
      margin-right: 10px;
    }
  }
  .p_list{
    white-space: nowrap;
  }
  .p_item{
    width: 67px;
    display: inline-block;
    margin-right: 15px;
    img{
      width: 67px;
      height: 67px;
      display: block;
      margin-bottom: 8px;
    }
    .p_name{
      font-size: 12px;
      color: #000000;
    }
    .p_price{
      font-weight: bold;
      font-size: 12px;
      color: #E80017;
      margin-top: 4px;
    }
  }
}
</style>